<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Konversi Kode HTML</title>
<style type="text/css">
 body {
    background-color: #222;
    padding: 20px;
    font: normal 11px Tahoma,Verdana,Arial,Sans-Serif;
    color: #999;
}

p {
    margin-top: 20px;
}

code {
    color: #aa2;
}

#codes {
    width: 98%;
    height: 200px;
    margin: 10px auto 10px;
    display: block;
    border:1px solid #3c3c3c;
    background-color:#333;
    -webkit-box-shadow:0px 1px 2px black;
    -moz-box-shadow:0px 1px 2px black;
    box-shadow:0px 1px 2px black;
    padding: 5px;
    font: normal 12px 'Courier New',Monospace;
}

#codes:focus {
    background-color: #3c3c3c;
    color: white;
}

.button-group {
    margin: 0px auto 0px;
    text-align: center;
}

button,button[disabled]:active {
    background-color: #333;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
    background-image: -moz-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
    background-image: -ms-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
    background-image: -o-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
    background-image: linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
    -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
    -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
    font: bold 11px Tahoma,Verdana,Arial,Sans-Serif;
    color: #999;
    padding: 5px 10px;    
    border: 1px solid #111;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}

button:active {
    background-color: #527915;
    color: white;
}

button[disabled],button[disabled]:active {
    background-color: #900;
    opacity: 0.4;
    cursor: default;
}

#opt1,
    #opt2,
    #opt3,
    #opt4,
    #opt5 {
    display: inline-block;
    margin: 0px 10px 0px 0px;
    vertical-align: middle;
    border: none;
    outline: none;
}
</style>
</head>
<body>
<textarea spellcheck="false" id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea>
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button>
<button onclick="cdClear();">Bersihkan</button>
</div>
<p>
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code><br />
<input id="opt2" type="checkbox" />Konversi <code>&#39;</code> menjadi <code>&amp;#039;</code><br />
<input id="opt3" type="checkbox" />Konversi <code>&quot;</code> menjadi <code>&amp;quot;</code><br />
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code><br />
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
</p>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<i rel=\"pre\">");
    } else {
        cv = cv.replace(/^/, "<i rel=\"code\">");
    }
    cv = cv.replace(/$/, "</i>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>
</body>
</html>